<template>
	<div class="agv ai-center">
		<img src="@/assets/images/banner/1.png" />
		<!-- <div class="agv-car" :style="{transform, transition: time + 's'}">我是AGV</div> -->
	</div>
</template>

<script>
let speed = 10,
		angle = 10;

export default{
	props:{
		pos:{
			type: Object,
			default: () => ({})
		}
	},
	data(){
		return{
			transform: '',
			time: 0,
			prev: {
				x: 0,
				z: 0
			}
		}
	},
	watch:{
		pos(val){
			let {x, z} = val,
					prev = this.prev;
			if(x != prev.x){
				this.time = Math.ceil((x-prev.x)/speed);
				this.transform += 'translateX(' + x + 'px) ';
				this.prev.x = x;
			}else if(z != prev.z){
				this.time = Math.ceil(z/angle);
				this.transform += 'rotate(' + z + 'deg) ';
				this.prev.z = z;
			}
		}
	}
}
</script>

<style scoped lang="less">
.agv{
	position: relative;
	overflow: hidden;
	.agv-car{
		position: absolute;
		top: 0;
		padding: .5vh .5vw;
		height: 3vh;
		line-height: 3vh;
		font-size: 2vh;
		text-indent: .5vh;
		background-color: #f40;
		border-radius: 1vh;
		border-top-right-radius: 6vh;
		border-bottom-right-radius: 3vh;
		transition: .2s;
	}
}
</style>
